<template>
  <div class="main-artist" ref="box">
    <div class="artist">
      <div class="content">
        <main-table>
          <a href="javascript:;" class="hot-a" slot="left">全部歌手</a>
          <div slot="right"></div>
          <div slot="body" class="body">
            <artist-nav></artist-nav>
            <artist-box :artists="artists"></artist-box>
          </div>
        </main-table>
      </div>
    </div>

    <main-footer></main-footer>
  </div>
</template>

<script>
import { getAllArtist } from '@/api/api.js'
import mainTable from '../../components/common/mainTable.vue'
import ArtistBox from './components/artistBox.vue'
import ArtistNav from './components/artistNav.vue'
import MainFooter from '../../components/common/mainFooter.vue'
export default {
  components: { mainTable, ArtistBox, ArtistNav, MainFooter },
  data() {
    return {
      initial: '-1',
      artists: [],
      offset: 0,
      scroll: '',
      limit: 30
    }
  },
  created() {
    this.getAllArtist()
  },
  mounted() {},
  methods: {
    async getAllArtist() {
      if (this.$route.query.initial) {
        let initial = this.$route.query.initial
        if (this.$route.query.initial === '热门') {
          initial = -1
        } else if (this.$route.query.initial === '其它') {
          initial = 0
        }
        const { artists: res } = await getAllArtist(
          initial,
          this.offset,
          this.limit
        )
        for (let item of res) {
          item.img1v1Url += '?param=200y200'
        }
        console.log(res)
        return (this.artists = res)
      }
      const { artists: res } = await getAllArtist(
        this.initial,
        this.offset,
        this.limit
      )

      for (let item of res) {
        item.img1v1Url += '?param=200y200'
      }
      console.log(res)
      this.artists = res
    }
  },
  watch: {
    $route() {
      this.getAllArtist()
    }
  }
}
</script>

<style lang="scss" scoped>
.main-artist {
  // overflow: scroll;
  // height: 1000px;
}

.artist {
  // display: flex;
  width: 980px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #d3d3d3;
  .content {
    width: 100%;
    padding: 40px;
    .hot-a {
      margin-bottom: 10px;
      font-size: 24px;
    }
  }
}
</style>
